﻿@{
    ViewBag.Title = "Test";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}


@model IEnumerable<GUI.Models.AccountAuthorModel>




@{
    var jTableStyle = "metro/blue/jtable.css";
    if (!string.IsNullOrEmpty(Request["jTableStyle"]))
    {
        jTableStyle = Request["jTableStyle"];
    }
}



<div id="tele">

</div>


    <link href="@Url.Content("~/Content/Jtable/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Jtable/themes/metroblue/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Jtable/highlight.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/jtable/themes/" + jTableStyle)" rel="stylesheet" type="text/css" />

    

    <link href="@Url.Content("~/Scripts/syntaxhighligher/styles/shCore.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/syntaxhighligher/styles/shThemeDefault.css")" rel="stylesheet" type="text/css" />
     <script src="@Url.Content("~/Scripts/modernizr-2.6.2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.9.2.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/syntaxhighligher/shCore.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushJScript.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushXml.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushCSharp.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushSql.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jtablesite.js")" type="text/javascript"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jtable/jquery.jtable.js")"></script>
    

<div id="StudentTableContainer">
</div>

<!-- An area to show selected rows (for demonstration) -->
<br />
<button id="DeleteAllButton"> <img src="~/Content/images/delete.png" style="background-color:white" /></button>
<br /> <br />
@*Selected rows (refreshed on <b>selectionChanged</b> event):*@
<div id="SelectedRowList">
    No row selected! Select rows to see here...
</div>

<script type="text/javascript">

    $(document).ready(function () {
   
        $('#StudentTableContainer').jtable({
            title: 'Authors List',
            paging: true,
            sorting: true,
            defaultSorting: 'Name ASC',
            selecting: true, //Enable selecting
            multiselect: true, //Allow multiple selecting
            selectingCheckboxes: true, //Show checkboxes on first column
            defaultSorting: 'Name ASC',
            actions: {
                listAction:   '@Url.Action("AccountList")',
                deleteAction: '@Url.Action("DeleteAuthor")',
                updateAction: '@Url.Action("UpdateAuthor")'
             
            },
            fields: {
                Id: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                Name: {
                    title: 'Name',
                    width: '10%'
                },

                Lastname: {
                    title: 'Lastname',
                    width: '10%'
                },
                userPr: {
                    title: 'Login',
                    width: '13%'
                   
                },
              
                Adressmail: {
                    title: 'Email',
                    width: '20%'
                },
               
              
              
                Profil: {
                    title: 'Profil',
                    width: '15%',
               
                    display: function (Data) {
                        //Create an image that will be used to open child table
                        var $img = $('<img src="/Content/images/arrow_down.png" style="" title="Sujets" />');
                        //Open child table when user clicks the image
                        debugger
                        $img.click(function () {
                            $('#StudentTableContainer').jtable('openChildTable',
                                    $img.closest('tr'),
                                    {
                                        title: Data.record.Title + ' - Article Title  ',
                                        actions: {
                                            listAction: '/Account/Getroles?userid=' + Data.record.userPr
                                           // deleteAction: '/Articles/DeleteThemes',
                                           // updateAction: '/Articles/Updatethemes'
                                            //createAction: '/Demo/CreatePhone'
                                        },

                                        fields: {
                                          
                                            RoleName: {
                                                title: 'Roles',
                                                width: '15%'

                                            }



                                        }
                                    }, function (data) { //opened handler
                                        data.childTable.jtable('load');
                                    });
                        });
                        //Return image to show on the person row
                        return $img;
                    }

                }
               

            },

            //Register to selectionChanged event to hanlde events
            selectionChanged: function () {
             
                //Get all selected rows
                var $selectedRows = $('#StudentTableContainer').jtable('selectedRows');

                $('#SelectedRowList').empty();
                if ($selectedRows.length > 0) {
                    //Show selected rows
                    $selectedRows.each(function () {
                        var record = $(this).data('record');
                        $('#SelectedRowList').append(
                            '<b>Id</b>: ' + record.Id +
                            '<br /><b>Name</b>:' + record.Name +" "+record.Lastname+" " +"is"+" "+record.Profil+'<br /><br />'
                            );
                    });
                } else {
                    //No rows selected
                    $('#SelectedRowList').append('No row selected! Select rows to see here...');
                }
            }
        });

        //Load student list from server
        $('#StudentTableContainer').jtable('load');

        //Delete selected students
        $('#DeleteAllButton').button().click(function () {
            var $selectedRows = $('#StudentTableContainer').jtable('selectedRows');
            $('#StudentTableContainer').jtable('deleteRows', $selectedRows);
        });
    });

</script>


